import { settings, moveGroup, setGroup, changeSetting } from "../settings";
import { importData, downText } from "../utilities";
import { themes } from "../engines";
import SettingCheck from "./SettingCheck";
import SettingRange from "./SettingRange";
import SettingSelect from "./SettingSelect";
import { Eye, EyeOff, ChevronsUp, ChevronsDown } from "lucide-preact";
import { types } from "../Widgets/hitokoto";
import { notes, resetNotes, importNotes, exportNotes } from "../Widgets/notes";

const widgetNames = ["时间日期", "便签", "一言卡片", "日历卡片"];

const WidgetSettings = () => (
  <>
    <SettingCheck area="widget" prop="enabled" desp="显示组件屏幕" />
    <ul class="list w-full">
      {settings.value.widget.items.map(({ id, show }) => (
        <li class="list-row place-items-center p-1" key={id}>
          <label class="swap swap-rotate">
            <input
              type="checkbox"
              checked={show}
              onChange={(event) => {
                setGroup(id, event.target.checked);
              }}
            />
            <EyeOff class="swap-off" />
            <Eye class="swap-on" />
          </label>
          <div>{widgetNames[id]}</div>
          <div class="join *:btn-soft *:btn-sm">
            <button
              class="btn btn-info join-item"
              onClick={() => {
                moveGroup(id, true);
              }}
            >
              <ChevronsUp />
            </button>
            <button
              class="btn btn-info join-item"
              onClick={() => {
                moveGroup(id, false);
              }}
            >
              <ChevronsDown />
            </button>
          </div>
        </li>
      ))}
    </ul>
    <SettingRange
      area="widget"
      prop="top"
      desp="顶部留白"
      min={0}
      max={80}
      step={0.1}
    />
    <div class="divider divider-secondary">日历</div>
    <SettingCheck area="widget" prop="calendarMonday" desp="首列为周一" />
    <SettingCheck area="widget" prop="calendarPast" desp="半透明显示历史日期" />
    <SettingSelect
      area="widget"
      prop="calendarToday"
      desp="今天配色"
      options={Object.keys(themes)}
    />
    <SettingSelect
      area="widget"
      prop="calendarWeekend"
      desp="周末配色"
      options={Object.keys(themes)}
    />
    <div class="divider divider-secondary">一言卡片</div>
    <blockquote class="alert alert-vertical alert-soft alert-info text-xs">
      <p>
        <a href="https://hitokoto.cn/" rel="noopener noreferrer">
          一言获取自 hitokoto.cn，点击访问
        </a>
        <br />
        <strong>每秒限制获取两次，不要频繁刷新</strong>
      </p>
    </blockquote>
    <SettingCheck area="widget" prop="hitokotoFrom" desp="显示出处" />
    <label class="label" for="hitokotoTypes">
      句子类型 ({String(settings.value.widget.hitokotoTypes.length)}/
      {String(Object.keys(types).length)})
    </label>
    <select
      multiple
      class="select"
      id="hitokotoTypes"
      onChange={(event) => {
        const options = event.target.querySelectorAll("option");
        const result = [];
        for (const { value, selected } of options) {
          selected && result.push(value);
        }
        changeSetting("widget", "hitokotoTypes", result);
      }}
    >
      {Object.keys(types).map((value) => (
        <option
          key={value}
          value={value}
          selected={settings.value.widget.hitokotoTypes.includes(value)}
        >
          {types[value]}
        </option>
      ))}
    </select>
    <div class="divider divider-secondary">便签</div>
    <SettingRange
      area="widget"
      prop="noteRows"
      desp="输入框行数"
      min={1}
      max={10}
      step={1}
    />
    <div class="*:btn-soft *:btn-wide *:my-2">
      <button
        type="button"
        class="btn btn-secondary"
        onClick={() => {
          importData(
            (data) => !Array.isArray(data) || typeof data[0] !== "string",
            importNotes,
          );
        }}
      >
        导入便签 json
      </button>
      <button
        type="button"
        class="btn btn-info"
        onClick={() => {
          downText(JSON.stringify(notes.value, void 0, 2), "便签.json");
        }}
      >
        导出便签 json (可导入)
      </button>
      <button
        type="button"
        class="btn btn-info"
        onClick={() => {
          downText(exportNotes(), "便签.txt");
        }}
      >
        导出便签 txt (人读)
      </button>
      <button
        type="button"
        class="btn btn-error"
        onClick={() => {
          resetNotes();
        }}
      >
        清空便签
      </button>
    </div>
  </>
);

export default WidgetSettings;
